<!-- /.content-wrapper -->
<footer class="main-footer">
    <div class="pull-right hidden-xs">
        <b>Version</b> 2.4.0
    </div>
    <strong>Copyright &copy; 2017-2018 <a href="http://www.chenxun.org">Reshiram</a>.</strong> All rights
    reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><a href="#control-sidebar-theme-demo-options-tab" data-toggle="tab" aria-expanded="true"><i
                        class="fa fa-wrench"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <!-- /.tab-pane -->
        <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
            <div>
                <div class="form-group"><label class="control-sidebar-subheading"><input data-sidebarskin="toggle"
                                                                                         class="pull-right"
                                                                                         type="checkbox"> Toggle Right
                        Sidebar Skin</label>
                    <p>Toggle between dark and light skins for the right sidebar</p></div>
                <h4 class="control-sidebar-heading">Skins</h4>
                <ul class="list-unstyled clearfix">
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-blue"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9"></span><span
                                        class="bg-light-blue"
                                        style="display:block; width: 80%; float: left; height: 7px;"></span></div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Blue</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-black"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span
                                        style="display:block; width: 20%; float: left; height: 7px; background: #fefefe"></span><span
                                        style="display:block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Black</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-purple"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-purple-active"></span><span class="bg-purple"
                                                                             style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Purple</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-green"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-green-active"></span><span class="bg-green"
                                                                            style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Green</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-red"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-red-active"></span><span class="bg-red"
                                                                          style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Red</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-yellow"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-yellow-active"></span><span class="bg-yellow"
                                                                             style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin">Yellow</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-blue-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9"></span><span
                                        class="bg-light-blue"
                                        style="display:block; width: 80%; float: left; height: 7px;"></span></div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Blue Light</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-black-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span
                                        style="display:block; width: 20%; float: left; height: 7px; background: #fefefe"></span><span
                                        style="display:block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Black Light</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-purple-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-purple-active"></span><span class="bg-purple"
                                                                             style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Purple Light</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-green-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-green-active"></span><span class="bg-green"
                                                                            style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Green Light</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-red-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-red-active"></span><span class="bg-red"
                                                                          style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Red Light</p></li>
                    <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                               data-skin="skin-yellow-light"
                                                                               style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                               class="clearfix full-opacity-hover">
                            <div><span style="display:block; width: 20%; float: left; height: 7px;"
                                       class="bg-yellow-active"></span><span class="bg-yellow"
                                                                             style="display:block; width: 80%; float: left; height: 7px;"></span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
                                        style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">Yellow Light</p></li>
                </ul>
            </div>
        </div>
        <!-- Stats tab content -->
        <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">
            <form method="post">
                <h3 class="control-sidebar-heading">General Settings</h3>

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Report panel usage
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Some information about this general settings option
                    </p>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Allow mail redirect
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Other sets of options are available
                    </p>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Expose author name in posts
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Allow the user to show his name in blog posts
                    </p>
                </div>
                <!-- /.form-group -->

                <h3 class="control-sidebar-heading">Chat Settings</h3>

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Show me as online
                        <input type="checkbox" class="pull-right" checked>
                    </label>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Turn off notifications
                        <input type="checkbox" class="pull-right">
                    </label>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Delete chat history
                        <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                    </label>
                </div>
                <!-- /.form-group -->
            </form>
        </div>
        <!-- /.tab-pane -->
    </div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
     immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="/javascripts/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/javascripts/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/moment.min.js"></script>
<!-- DataTables -->
<script src="/javascripts/jquery.dataTables.min.js"></script>
<script src="/javascripts/dataTables.bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/javascripts/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/javascripts/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/javascripts/demo.js"></script>
<script src="/javascripts/bootstrap-select.min.js"></script>
<script src="/javascripts/defaults-zh_CN.min.js"></script>
<script src="/javascripts/noty.min.js"></script>
<script src="/javascripts/jquery.bonsai.js"></script>
<script src="/javascripts/jquery.qubit.js"></script>
<script src="/javascripts/jquery.datetimepicker.full.min.js"></script>
<script src="/javascripts/app.js"></script>

<!-- page script -->
<script>
    $(function () {
        $('#example2').DataTable({
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : true
        })
    })
</script>
</body>
</html>